Top 10 Useful CSS3 Menu Examples
Thmenu is the result of a combination of my best works on Codecanyon : I’ve put together a flexible megmenu system that can hold 12 sizes drop downs, unlimited fly-out elements combined with jQuery script to enhance the whole system. It can be used as sticky footer (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. Customizing menu require some basic knowledge CSS and you can change the look of every part of menu : the fonts, the colors, the sizes, etc. Fully Responsive Menu
Standard Top Menu
Sticky (or fixed) Top Menu
The package contains 2 folders : “Responsive” and “Non-Responsive” so menu ready to be included on any type of website. For each version of the menu, responsive and non-responsive, you have 6 HTML files with various examples of what you can do with the menu, from simple navigation bar without drop downs to a combination of 2 mega menus on a same page. Thmenu has been tested on many devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests.The whole menu relies mainly on CSS, it means that if Javascript is disabled, most of menu will work. You also may notice some differences between browsers : some CSS3 effects like shadows or CSS3 navigation menu are not showing up in Internet Explorer example (for more informations on this topic, you can visit findmebyIP). Be sure test demo with different browsers or devices to make sure that menu meets your requirements.I try to regularly update my products based on the feedback I receive, so if you find any kind of bug, I’ll do my best update menu as soon as possible. I’ve also created website that compares and filters my different menus options / features, Mega-Menu. If you’re still not sure about menu that would fit into your project, you can contact me at any time from my profile page.
2. CSS3 Menu
CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forw
ard and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations.
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation.
3. Zozo Tabs
Some of it’s key features includes: vertical tabs, horizontal tabs, responsive tabs, deep-linking, powerfull API, CSS3 transition with fallback, 6+ sizes, 10+ themes, 14+ templates, 10+ positions, 65+ options and much more. Added: Two templates/examples clean tabs ajax content
Added: Option maxRows which will be used to switch to multilevel dropdown menu CSS when executed
Added: Option minWindowWidth which will be used switch to dropdown menu CSS3
Improved: All templates/examples and added jQuery as a parameter to ready method instead of $ to avoid conflicts with other libraries
Touch-Enabled – Tabs are displayed in a animated dropdown menu using jQuery with touch enabled events and fast CSS3 Transitions, view Mobile Tabs
14 Examples/templates – We’ve created fourteen templates to get you started quickly, View All Templates
CSS3 Transitions – Animation is done CSS3 Transitions jQuery fallback for older browsers, view Animation demo
CSS3 and HTML5 – All content is allways accessible to search engines and markup semantically correct to help you achieve best possible SEO-friendly results even without JavaScript enabled. Automatically Scrolling – When clicking on tabs/downlown menu on smaller screens, it will scroll automatically to show your content.
This MegMenu Reloaded comes with awesome options and is the most complete solution to build mega menus. Getting rid of them will not affect the main functionnality of the menu. Notice : the live preview doesn’t show all the options available for this menu, check video for more examples.Menu bar scroller
Uses some CSS3 magic
Please keep in mind that some CSS3 features don’t work with old browsers rounded corners.Modified CSS to make menu more responsive
Added an option hide the HTML menu bar on page load
I’ve also created website that compares and filters my different menus by options / features, Mega-Menu. If you’re still not sure about menu that would fit into your project, you can contact me at any time from my profile page.
This is a animated CSS3 menu inspired in the new Microsoft Metro UI. Pure CSS3 & HTML
Fixed some bugs in examples files.
custom scrollbars packed in thmenu will automatically appear when needed and if you need add even more content, you can use the infinite carousel scroll between each part of the panel.CSS3 animations
Here are a few examples of the possible usages :
Thmenu has been tested on many devices browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests.Please note that some features don’t show up on some browsers, example gradients or CSS3 slideshow don’t work under Internet Explorer 7-8.
Smart Responsive Menu is powerful dropdown menu solution that will work mobile devices and different screen sizes. Menu relies CSS media queries to modify menu display for different resolutions. For less than 480px, menu changes from CSS horizontal navigation bar examples vertical and gets hidden behind menu item. Due to the many differences between mobile browsers, different support for CSS, menu must use JavaScript to make up for these problems. There is way to make menu universally work without use of JavaScript.Plugin control is done by combining CSS classes on menu element with many options available with jQuery plugin.You can combine different effects to display the menu:
Menu Links: with three types of characters and arrows
Various demos examples to show how menu can be set
Added: Vertical menu open/close animation
Updated: Demo files examples
Fixed: Box-shadow effect menu toggle state
Sky Mega Menu is a clean, responsive solution for creation beautiful site navigations.If you like Sky Mega Menu, please don’t forget to rate!
Beautiful CSS3 animationsThere are 4 animation effects based pure CSS3: scale, slide, tilt and fade.Useful examplesYou can use these examples as a base for creation your own navigations simple and fast.I was having troubles with menu due to my stupidness and Voky sat with me for almost the entire night fixing my problem.
I love Mac and I love Fish Eye Menu. 4 menu positions (bottom, top, left, right)
8 useful examples
Pure CSS3 Round Menu is a clean, customizable solution for creation different menus and navigations. Menu relies only on CSS/HTML and comes with lots customization options, unlimited color combinations and much more.If you liked Round Menu, please don’t forget to rate it!
34 examples.Note: some CSS3 effects and animations are not available IE8 and IE9.
For less than 480px, menu changes from horizontal navigation bar CSS vertical and gets hidden behind menu item.Breadcrumbs are fully responsive, and they will work fine on the small screens (mobile/touch devices) and will turn menu for easier navigation with a limited space.You can combine different effects display the menu:
Various demos examples to show how menu can be set
Added: New effect for compact menu display
Added: Random styles and effects examples page